"use client";
import { getDeepSeekResponse } from '@/api/openai';
import { useState } from 'react';

export default function Home() {

  const [messages, setMessages] = useState([
    { text: '想我了吗，孩子们？', sender: 'ai' },
  ]);
  const [input, setInput] = useState('');

  const sendMessage = () => {
    if (input.trim() === '') return;
    setMessages([...messages, { text: input, sender: 'user' }]);
    setInput('');

    // Simulate AI response
    setTimeout(() => {
      const message = getDeepSeekResponse(input);
      setMessages((prevMessages) => [
        ...prevMessages,
        { text: message, sender: 'ai' },
      ]);
    }, 1000);
  };

  return (

    <div className="flex justify-center items-center h-screen bg-gradient-to-r from-purple-400 via-pink-500 to-red-500">
      <div className="w-full max-w-lg bg-white shadow-lg rounded-lg p-4 transform hover:scale-105 transition-transform duration-300">
        <div className="flex-1 p-4 overflow-y-auto h-96">
          {messages.map((message, index) => (
            <div key={index} className="flex items-end mb-2">
              {message.sender === 'ai' && (
                <img
                  src="https://pic.imgdb.cn/item/667d3ee2d9c307b7e992f804.png"
                  alt="AI"
                  className="w-10 h-10 rounded-full mr-2"
                />
              )}
              <div
                className={`p-2 rounded-lg shadow-md ${
                  message.sender === 'user' ? 'bg-blue-500 text-white ml-auto' : 'bg-gray-200 text-gray-800 mr-auto'
                } animate-fadeIn`}
                style={{ maxWidth: '70%' }}
              >
                {message.text}
              </div>
              {message.sender === 'user' && (
                <img
                  src="https://pic.imgdb.cn/item/667d3f03d9c307b7e99331d1.jpg"
                  alt="User"
                  className="w-10 h-10 rounded-full ml-2"
                />
              )}
            </div>

          ))}
        </div>
        <div className="p-4 border-t border-gray-300">
          <div className="flex">
            <input
              type="text"
              value={input}
              onChange={(e) => setInput(e.target.value)}
              className="flex-1 p-2 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-blue-500 text-black"
              placeholder="Type a message..."
            />
            <button
              onClick={sendMessage}
              className="px-4 py-2 bg-blue-500 text-white rounded-r hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 transition-colors duration-300"
            >
              Send
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
